<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>reader</title>
    <link rel="stylesheet" href="@../media/common.css">
    <script src="@../../lib/jquery-3.3.1.min.js"></script>
    <script src="@../../lib/jszip.js"></script>
    <script src="@../../lib/epub.js"></script>
    <script src="@../utils/WebviewMessageHelper.js"></script>

    <style>
        .layout {
            position: relative;
        }
        .main {
            position: relative;
        }
        .main .prev-page,
        .main .next-page {
            position: absolute;
            cursor: pointer;
            top: 50%;
            height: 200px;
            line-height: 200px;
            margin-top: -100px;
            width: 100px;
            font-size: 20px;
            font-weight: 400;
            padding: 2px;
            color: rgba(222, 222, 222, .4);
        }
        .main .prev-page {
            left: 0;
        }
        .main .next-page {
            right: 0%;
            text-align: right;
        }
    </style>

</head>
<body class="layout">
    <div class="hover-show">
        <button id="back" class="hover-show-target">back</button>
        <select id="toc" class="hover-show-target"></select>
        <span id="current-percent" style="float: right;">{{ progress }}</span>
    </div>
    <div class="main">
        <div id="area">

        </div>
        <div class="prev-page hover-show"><span class="hover-show-target">&lt;</span></div>
        <div class="next-page hover-show"><span class="hover-show-target">&gt;</span></div>
    </div>
</body>
<script>
    const bookName = '{{ bookName }}';
    const bookProgress = '{{ progress }}';
    const cfi =  '{{ cfi }}' && '{{ cfi }}' !== 'undefined' ? '{{ cfi }}' : undefined;
    const vscode = acquireVsCodeApi();
    const webviewMessageHelper = new WebviewMessageHelper(vscode);
    const book = ePub('{{ bookPath }}');
    const rendition = book.renderTo("area", {
        width: '100%',
        height: document.documentElement.clientHeight * .9,
        flow: "paginated"
    });
    const displayed = rendition.display(cfi);

    // 设置样式
    rendition.themes.default({
      body: {
        'font-size': '{{ fontSize }}px',
        color: '{{ fontColor }}',
        'background-color': 'rgb(30, 30, 30)'
      },
    });

    //  时时保存阅读进度
    rendition.on('relocated', function(location){
        const cfi = location.start.cfi;
        const progress = book.locations.percentageFromCfi(cfi).toFixed(4);
        $('#current-percent').html(progress || bookProgress);
        webviewMessageHelper.emit({ command: 'update:readerProgress', book: bookName, progress, cfi });
    });

    book.ready.then(function() {
        const locations = book.locations.generate(1600); // 很慢，后面可以考虑存起来
		return locations;
	});

    // 加载目录
    book.loaded.navigation.then(toc => {
        var $select = document.getElementById("toc"),
            docfrag = document.createDocumentFragment();
        toc.forEach(function(chapter) {
            var option = document.createElement("option");
            option.textContent = chapter.label;
            option.ref = chapter.href;
            docfrag.appendChild(option);
        });
        $select.appendChild(docfrag);

        $select.onchange = function(){
            const ref = $select.options[$select.selectedIndex].ref;
            rendition.display(ref);        
            return false;
        };
    });


    $('.prev-page').click(function() {
        rendition.prev();
    });
    $('.next-page').click(function() {
        rendition.next();
    });
    $(document).keydown(function(e) {
        if (e.keyCode === 65) rendition.prev();
        if (e.keyCode === 68) rendition.next();
    });

    $('#back').click(function() {
        webviewMessageHelper.emit({ command: 'goto:index' });
    });
</script>
</html>